﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>色彩王共享打印机</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
section {
	/*float:left;*/
	margin:10px;
	/*width:260px;
	height:200px;*/
	font-size:24px;
	text-align:center;
	line-height:36px;
	border:1px solid gray;
	overflow:hidden;
}
/*section div,img,canvas,video,button {
	display:block;
	margin:auto;
	width:100%;
	cursor:pointer;
}*/
div {
	
	color:white;
	font-weight:bold;
	background-color:#423c41;
}
canvas {
	background-color:blue;
}
video {
	background-color:#666;
}
button {
	min-height:156px;
	line-height:156px;
	color:white;
	font-size:24px;
	font-weight:bold;
	background-color:#0AAF00;
}
</style>
</head>
<body>
<section>
    <div id="div" class="divPrinter">


        <div style="height:100%;width: 80%;float: left;">
    	<!-- 建立一个div控件作为图片框 -->
        <div class="imgBox" style="height: 100%;width: 100%;" id="imgBox" name="imgBox" >
            <!-- alt：图片路径失败时替换显示内容 -->
            <!-- <img class="img-slide img" src="timg (1).jpeg" alt="img1" style="height: 100%;">
            <img class="img-slide img" src="图片 7.png" alt="img2" style="height: 100%;">
            <img class="img-slide img" src="timg (1).jpeg" alt="img3" style="height: 100%;">
            <img class="img-slide img" src="图片 7.png" alt="img4" style="height: 100%;">
            <img class="img-slide img" src="timg (1).jpeg" alt="img5" style="height: 100%;"> -->
        </div>
    </div>

    <div style="height:100%;width: 20%;float: right;">
        <div>
           

<div style="margin-top: 100%;">
            <font>色彩王共享打印机</font></div>
            <br />
            <div style="line-height: -10px;">
           
          <img class="img-qr" id="img-qr" src="${qr_url}" style="width: 50%;height: auto;"></div>
<font style="font-size: 7pt;">使用微信扫一扫</font>
 

        </div>
        

    </div>

    </div>

</section>


<script>
window.onload = function() {
     // 设备编号
    var deviceNum = GetQueryValue1("deviceId");

    // alert("deviceNum=" + deviceNum);

    var singleImgInterval = 6000;       // 单张图片切换时间（毫秒） 默认6秒切换一次
    var netImgInterval = 60000;          // 从网络刷新图片时间间隔（毫秒） 默认60秒
    var timeId = null;



    function GetQueryValue1(queryName) {
        var reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if ( r != null ){
            return decodeURI(r[2]);
        }else{
            return null;
        }
    }

    // 从后台获取图片数据
    function getImgList() {
       
        
        var url = "/prod-api/goods/advertising/wx/list?facilityCode=";

        $.get(url,
         function(data) {
            if(data.code == 200) {
                var imgList = data.rows;
                var innerHtml = "";

                for (let index=0; index < imgList.length; index++) {
                    var single = imgList[index];
                    //alert(single.url);
                    var imgIndex = index + 1;
                    var singleUrl = single.url;
                    innerHtml = innerHtml + '<img class="img-slide img" src="'+singleUrl+'" alt="img'+imgIndex+'" style="height: 100%;width:100%;">';
                }

                //alert(innerHtml);
               document.getElementById("imgBox").innerHTML = innerHtml;
               //document.getElementById("imgBox").innerHTML = "showme";
               stratLunBo();
            }
            
         });
    }

     // 从后台获取二维码图片
    function getImgQrList() {
       
        
        var url = "/prod-api/facility/facility/wx/code/" + deviceNum;

        $.get(url,
         function(data) {
            if(data.code == 200) {
                var imgUrl = data.data.qrCodeUrl;

                //alert(innerHtml);
                if(imgUrl != null && imgUrl != "null") {
                    
                    //alert(imgUrl);
                    document.getElementById("img-qr").src =  imgUrl;
                }
               

            }
            
         });


        


    }

     getImgList();
      getImgQrList();


    function sleep(delay) {
        for(var t = Date.now(); Date.now() - t <= d;);
    }

    
     
    //打开全屏方法
    function openFullscreen(element) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullScreen();
        }
    }

    //退出全屏方法
    function exitFullScreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExiFullscreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();

        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }

    //div全屏(全屏方法1)
    document.getElementById("div").addEventListener('click', function() {
        openFullscreen(this); //调用上面全屏方法1
    }, false);





    //绘制蓝色外圈
    function blueCircle(n) {
        context.save();
        context.strokeStyle = "#fff"; //设置描边样式
        context.lineWidth = 5; //设置线宽
        context.beginPath(); //路径开始
        context.arc(centerX, centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
        context.stroke(); //绘制
        context.closePath(); //路径结束
        context.restore();
    }

    //绘制白色外圈
    function whiteCircle() {
        context.save();
        context.beginPath();
        context.strokeStyle = "white";
        context.arc(centerX, centerY, 100, 0, Math.PI * 2, false);
        context.stroke();
        context.closePath();
        context.restore();
    }

    //百分比文字绘制
    function text(n) {
        context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
        context.strokeStyle = "#fff"; //设置描边样式
        context.font = "40px Arial"; //设置字体大小和字体
        //绘制字体，并且指定位置
        context.strokeText(n.toFixed(0) + "%", centerX - 25, centerY + 10);
        context.stroke(); //执行绘制
        context.restore();
    }

    //动画循环
    (function drawFrame() {
        // window.requestAnimationFrame(drawFrame, canvas);
        // context.clearRect(0, 0, canvas.width, canvas.height);
        // whiteCircle();
        // text(speed);
        // blueCircle(speed);
        // if (speed > 100) speed = 0;
        // speed += 0.1;
    }());


    function stratLunBo() {
         //  开始轮播图
        // index：索引， len：长度
        var index = 0, len;
        // 类似获取一个元素数组
        var imgBox = document.getElementsByClassName("img-slide");
        len = imgBox.length;
        imgBox[index].style.display = 'block';
        // 逻辑控制函数
        function slideShow() {
            index ++;
            // 防止数组溢出
            if(index >= len) index = 0;
            // 遍历每一个元素
            for(var i=0; i<len; i++) {
                imgBox[i].style.display = 'none';
            }
            // 每次只有一张图片显示
            imgBox[index].style.display = 'block';
        }
        
        if(timeId != null) {
            clearInterval(timeId);
        }
        // 定时器，间隔3s切换图片
        timeId = setInterval(slideShow, singleImgInterval);
    }
   

     setInterval(function(){ getImgList(); }, netImgInterval);

}


</script>

</body>
</html>
